<template>
	<div class="front_resource_list wrapper">
		<div class="filter">
			<filter-item label="来源" type="source" :data="resourceClassify" @checked="handleCheckedFilter"></filter-item>
			<filter-item label="属性" type="property"></filter-item>
			<filter-item label="院系" type="deptId" :data="departListData" @checked="handleCheckedFilter"></filter-item>
		</div>
		<resource-hand @switch="handleSwitchType" @sort="handleResourceSort"></resource-hand>
		<el-row class="list" :gutter="24">
			<template v-if="!resourceListData.length">
				<el-empty description="描述文字"></el-empty>
			</template>
			<template v-else>
				<el-col v-for="(item, index) in resourceListData" :key="index" :span="6">
					<dl @click="handleToDetail(item.id)">
						<dt :class="resTypeShow(item.showType)"><img :src="item.coverAddr" :alt="item.zjName" /></dt>
						<dd class="tit">{{ item.zjName }}</dd>
						<dd class="info">
							<span>{{ item.createName }}</span>
							<span>{{ item.createTime }}</span>
							<span class="el-icon-view">{{ item.browseCount || 0 }}</span>
						</dd>
					</dl>
				</el-col>
			</template>
		</el-row>
		<div class="page"><sw-pagination notice="数据" :total="dataCount" :page.sync="listQuery.page" :limit="listQuery.limit" @change="getResourceListData"></sw-pagination></div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import filterItem from './filterItem';
import resourceHand from './resourceHand';
import { getResourceList, getAllDepartList } from '@/api/openApi';
export default {
	components: { filterItem, resourceHand },
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 12,
				del: '1',
				orderFiledType: 6
			},
			resourceTypes: [],
			resourceClassify: [],
			resourceListData: [],
			departListData: []
		};
	},
	computed: {
		resTypeShow() {
			return val => {
				if (val === '1') {
					return 'image';
				} else if (val === '2') {
					return 'audio';
				} else if (val === '3') {
					return 'video';
				} else if (val === '4') {
					return 'document';
				} else {
					return 'other';
				}
			};
		}
	},
	created() {
		this.getEnumDataByCode('RESOURCE_CLASSIFICATION').then(classifys => {
			this.resourceClassify = classifys
				.sort((a, b) => Number(a.value) - Number(b.value))
				.map(item => {
					return { label: item.msg, value: item.value };
				});
		});
		this.getDepartListData();
	},
	mounted() {
		this.getResourceListData();
	},
	methods: {
		...mapActions(['getEnumDataByCode']),

		//获取资源列表数据
		async getResourceListData() {
			let params = { ...this.listQuery };
			let result = await getResourceList(params).then(res => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.resourceListData = !result.data ? [] : result.data;
			}
		},

		//获取院系列表数据
		async getDepartListData() {
			let result = await getAllDepartList({ sortType: '1' }).then(res => res.data);
			if (result.code === '0') {
				let datas = !result.data ? [] : result.data;
				this.departListData = datas.map(item => {
					return { label: item.name, value: item.id };
				});
			}
		},

		handleSwitchType(val) {
			this.listQuery['showType'] = val == 0 ? '' : val;
			this.listQuery.page = 1;
			this.getResourceListData();
		},

		handleResourceSort(val) {
			this.listQuery['orderFiledType'] = val;
			this.getResourceListData();
		},

		handleCheckedFilter(type, val) {
			this.listQuery[type] = val == 0 ? '' : val;
			this.getResourceListData();
		},

		//去资源详情
		handleToDetail(id) {
			this.$router.push({
				path: '/front/resource/' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.front_resource_list {
	padding-bottom: 80px;
	.filter {
		padding: 5px 25px;
		border-radius: 8px;
		background-color: #fff;
	}
	.list {
		.el-col {
			margin-top: 24px;
		}
		dl {
			border-radius: 8px;
			background-color: #fff;
			overflow: hidden;
			cursor: pointer;
			transition: box-shadow 0.15s linear;
			&:hover {
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			}
		}
		dt {
			position: relative;
			padding-top: 56.25%;
			border-bottom: solid 1px #f9f9f9;
			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			&::before {
				position: absolute;
				width: 62px;
				height: 26px;
				left: 0;
				bottom: 0;
				content: '';
				border-radius: 0 8px 0 0;
				background-image: url('../../../assets/img/resTypeImage.png');
				background-repeat: no-repeat;
				background-size: 100%;
				z-index: 2;
			}
			&.image::before {
				background-position: 0 0;
				background-color: #6ccec7;
			}
			&.audio::before {
				background-position: 0 -26px;
				background-color: #60c1e9;
			}
			&.video::before {
				background-position: 0 -52px;
				background-color: #ee518c;
			}
			&.document::before {
				background-position: 0 -78px;
				background-color: #ec7b7b;
			}
			&.other::before {
				background-position: 0 -106px;
				background-color: #f1b656;
			}
		}
		dd {
			margin: 16px;
			height: 20px;
			line-height: 20px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		dd.info {
			display: flex;
			align-items: center;
			color: #999;
			span {
				margin-left: 10px;
				&::before {
					margin-right: 6px;
				}
				&:nth-child(1) {
					margin-left: 0;
				}
				&:nth-child(2) {
					flex: 1;
				}
			}
		}
	}
	.page {
		margin-top: 56px;
	}
}
</style>
